<%@page import="java.util.ArrayList"%>
<%@ page import = "num.WebManager" %>
<%@ page import = "org.ntu.csn.as.manager.DBManager" %>
<%@ page import = "org.ntu.csn.as.tool.Constant" %>
<%@ page import = "org.ntu.csn.as.model.Category" %>

<jsp:useBean id="n" class="num.WebManager" scope="session"/>
<jsp:useBean id="db" class="org.ntu.csn.as.manager.DBManager" scope="session"/>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Question Manager</title>
        <script type="text/javascript">  
     
            function expand(id) {
                var el=document.getElementById(id);
                if (el.style.display!="none"){
                    el.style.display="none";
                }else{
                    el.style.display="block";
                }
            }
            
        </script>  

    </head>
    <body bgcolor="white">
        <%@include file="tpl_header.jsp"%>
          <center><img src="imgs/review_questions.png" width="400px" height="90px"></center>
   
        <table width="100%" border="0">                                                        
            <tr>
                <td><a href="#" onClick="expand('DBquestionlist');"><img src="imgs/expand.jpg" alt="Expand"></a>List of Questions: 
                </td> 
            </tr>
        </table>
        <div id="DBquestionlist" style="display:block">
        <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import = "java.util.*" %>
<sql:query var="rs" dataSource="jdbc/QASDB">
    select id, category, template, difflevel from question order by category desc
</sql:query>

<html>
    <head><title>Question Template List</title></head>
 <script type="text/javascript">  
 $(document).ready(function() {
 $("#qtable tr").hover(
		  function () {
			  $(this).addClass('tablehighlight');
		  }, 
		  function () {
		    $(this).removeClass('tablehighlight');
		  }
		);
 });
 
           </script>
    <body bgcolor="white">
        <table  width="100%" border="0">
            <tr>
                <td> 
                    <table  width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><table id="qtable" width="100%" cellpadding="8" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
                                    <tr>
				
				
					<th>Grade</th>
					<th>Topic</th>
					<th>Difficulty</th>
					<th>Question Template</th>
					
				</tr>
				 
                                    <c:forEach var="row" items="${rs.rows}">
                                     <%
                                            TreeMap row = (TreeMap)pageContext.getAttribute("row");   
                                            Integer cid = Integer.parseInt(String.valueOf(row.get("category")));
                                         
                                            %>
                                        <form action="" method=post>
                                            <tr>
                    
                                            <input name="act" type="hidden">
                                            <input name="myid" type="hidden" value=${row.id}> 
                                           <% %>
                                           <td><%=n.getCategory(cid).getGrade() %></td>
                                           <td><%=n.getCategory(cid).getTopic() %></td>
                                            <td><%=n.getDifficultyLevelName((Integer)row.get("diffLevel"))%></td>
                                            <td width="100%">[<b>Template</b>]--${row.template}</td>
                                            </tr>
                                        </form><p>
                                        </c:forEach> 
                                </table></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>



        </font>
    </body>
</html>
        </div>  
      <p>
    <table border="0" align="center">
<tr>
<td><a href="QuestionDesignController"><img src="imgs/backToPrevious.png" width="400px" height="80px"/></a></td>
<td><a href="ReviewQuestions.jsp"><img src="imgs/reviewQuestionAndSolution.png" width="400px" height="80px"/></a></td>
</tr>
</table>

        <%@include file="tpl_footer.jsp"%>
    </body>

    <script>
        $("select").change(function () {
            var str = "Topic: ";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
            });
          $("#MesBoard").text(str);
        })
        .change();

        jQuery(function() {
            //hj: validation, no empty string should be allowed.
            function validateRow(tr) {
                var valid = true;
        
                tr.find('input[type="text"]').each(function(i, el) {
                    if (!el.value.replace(' ', '')) return valid = false;
                });        
                tr.find('input[type="submit"]').attr('disabled', valid? false : true);
            }

            jQuery('tr').find('input').change(function() {
                validateRow(jQuery(this).closest('tr'));
            });
        });
    </script>

</html>
